<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 800px;
            height: 600px;
            position: relative;
            margin: 100px auto;
            background: #000000;
            border: 2px solid red;
            overflow: hidden;
        }

        .ball {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript">
        //创建构造函数
        function Hua() {
            //获取主体元素
            this.container = document.querySelector('#box')
            //调用绑定函数
            this.bindEvent()
        }
        //创建绑定函数
        Hua.prototype.bindEvent=function(){
            var self=this
            self.container.onclick=function(evt){
                var e=evt||event
                //创建一个烟花
                var hh=self.createFirework()
                hh.style.left=e.offsetX+'px'
                $(hh).animate({
                    top:e.offsetY+'px'
                },800,function(){
                    hh.remove()
                })
            }
        }
        //创建烟花
        Hua.prototype.createFirework=function(){
            var self=this
            var div=document.createElement('div')
            div.className='ball'
            div.style.backgroundColor='#'+Math.round(parseInt('ffffff',16)*Math.random()).toString(16).padStart(6,'0')
            self.container.appendChild(div)
            return div
        }
        //使烟花爆炸
        var res = new Hua()
    </script>
</body>

</html>